<template>
  <zyInfoPanel title="收寄件信息" :showUnfoldButton="false" class="receiveSendDetail">
    <zyInfoChange :model-info="receiveSendInfo" class="receiveSendInfo" v-if="type!=='look'"></zyInfoChange>
    <div class="lookDetail" v-else>
      <zyInfoPanelDetail :info="receiveSendLookInfo" cellNum="4"></zyInfoPanelDetail>
      <div class="imgArea">
        <div class="imgTitle">面单照片：</div>
        <div class="imgContent">
          <zy-image v-model="pictures_urls" class="img" v-if="pictures_urls" readonly></zy-image>
        </div>
      </div>
    </div>
    <div class="btnArea" :class="{'lookBtnArea': type==='look'}">
      <zy-button class="btn" @click="submit" type="primary" v-if="type!=='look'">确定</zy-button>
      <zy-button class="btn" @click="back">返回</zy-button>
    </div>
  </zyInfoPanel>
</template>

<script>
	export default {
		name: "CReceiveSendDetail",
		props: {},
		data() {
			return {
				type: '',
				receiveSendInfo: [
					{
						title: '合作企业',
						name: 'company_id',
						type: 'select',
						value: '',
						optionList: [],
						titleClass: 'required'
					},
					{
						title: '快递类型',
						name: 'logistics_type',
						type: 'select',
						value: '',
						optionList: [
							{label: '收件', value: 2},
							{label: '寄件', value: 1},
						],
						titleClass: 'required'
					},
					{
						title: '快递单号',
						name: 'logistics_no',
						type: 'input',
						value: '',
						titleClass: 'required',
						maxlength: '50'
					},
					{
						title: '收件人姓名',
						name: 'receive_communicate_name',
						type: 'input',
						value: '',
						titleClass: 'required',
						tag: 'chinese',
						maxlength: '20'
					},
					{
						title: '收件人电话',
						name: 'receive_communicate_mobile',
						type: 'input',
						value: '',
						titleClass: 'required',
						tag: 'mobile',
						maxlength: '11'
					},
					{
						title: '收件人地址',
						name: 'receive_communicate_address',
						type: 'input',
						value: '',
						titleClass: 'required',
						maxlength: '50'
					},
					{
						title: '寄件人姓名',
						name: 'post_communicate_name',
						type: 'input',
						value: '',
						titleClass: 'required',
						tag: 'chinese',
						maxlength: '20'
					},
					{
						title: '寄件人电话',
						name: 'post_communicate_mobile',
						type: 'input',
						value: '',
						titleClass: 'required',
						tag: 'mobile',
						maxlength: '11'
					},
					{
						title: '寄件人地址',
						name: 'post_communicate_address',
						type: 'input',
						value: '',
						titleClass: 'required',
						maxlength: '50'
					},
					{
						title: '邮寄物品',
						name: 'goods_name',
						type: 'input',
						value: '',
						maxlength: '100'
					},
					{
						title: '面单照片',
						name: 'face_file',
						type: 'file',
						value: '',
						titleClass: 'required',
						tip: '注：仅限PNG、BMP、JPG、JPEG'
					},
				],
				logistics_id: '',
				receiveSendLookInfo: [
					{
						name: "合作企业：",
						val: "",
						code: 'company_name'
					},
					{
						name: "快递类型：",
						val: "",
						code: 'logistics_type_desc'
					},
					{
						name: "快递单号：",
						val: "",
						code: 'logistics_no'
					},
					{
						name: "寄件人姓名：",
						val: "",
						code: 'post_communicate_name'
					},
					{
						name: "寄件人电话：",
						val: "",
						code: 'post_communicate_mobile'
					},
					{
						name: "寄件地址：",
						val: "",
						code: 'post_communicate_address'
					},
					{
						name: "收件人姓名：",
						val: "",
						code: 'receive_communicate_name'
					},
					{
						name: "收件人电话：",
						val: "",
						code: 'receive_communicate_mobile'
					},
					{
						name: "收件地址：",
						val: "",
						code: 'receive_communicate_address'
					},
					{
						name: "邮寄物品：",
						val: "",
						code: 'goods_name'
					},
					{
						name: "揽件时间：",
						val: "",
						code: 'post_time_desc'
					},
				],
				pictures_urls: ''
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			getCompanyList() {
				this.$axios.post(this.$api.c_getCompanyList, {
					pagination: {page_start: 1, page_size: 9999}
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.receiveSendInfo[0].optionList = data.list.filter(item => {
							item.label = item.company_name;
							item.value = item.company_id;
							return item;
						});
						if (this.logistics_id) this.getData();
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			getData() {
				this.$axios.post(this.$api.c_detailLogistics, {
					logistics_id: this.logistics_id
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						if (this.type === 'look') {
							this.receiveSendLookInfo = this.receiveSendLookInfo.filter(item => {
								item.val = data.info[item.code];
								return item
							});
							this.pictures_urls = data.info.face_file;
						} else {
							this.receiveSendInfo = this.receiveSendInfo.filter(item => {
								for (var key in data.info) {
									if (item.name === key) {
										item.value = data.info[key];
									}
								}
								return item
							});
						}
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			submit() {
				let postData = {
					logistics_id: this.logistics_id
				};
				let tipText = '';
				this.receiveSendInfo.forEach(item => {
					if (item.titleClass && item.titleClass.match('required') !== -1 && !item.value) {
						switch (item.type) {
							case "input":
								tipText = `请输入${item.title}`;
								break;
							case "select":
								tipText = `请选择${item.title}`;
								break;
							case "file":
								tipText = `请上传${item.title}`;
								break;
							default:
								tipText = `${item.title}不能为空`;
								break
						}
					}
					postData[item.name] = item.value;
				});

				if (tipText) {
					return this.$message.error(tipText);
				}

				this.$axios.post(this.$api.c_addEditLogistics, {
					...postData
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.back(true);
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			back(isRefresh) {
				this.$blackRoute({path: '/cooperate/receive_send', that: this, query: {isRefresh: isRefresh}})
			}
		},
		mounted() {
			this.type = this.$route.query.type;
			this.logistics_id = this.$route.query.logistics_id;
			this.type === 'look' ? this.getData() : this.getCompanyList();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/cooperate/receiveSend/receiveSendDetail/index.less">

</style>

